<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<style type="text/css">
			.baba{
				width: 200px;
				height: 200px;
				background-color: skyblue;
			}
			.layer{
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: rgba(0,0,0,.3);
			}
		</style>
		<button class="hide">消失</button>
		<button class="show">显示</button>
		<button class="showLayer">显示遮罩</button>
		<div class="baba">
			点我消失
		</div>
		<div class="layer">
			<button class="close">关闭遮罩</button>
		</div>
		<script type="text/javascript">
			var baba = document.querySelector(".baba");
			var hide = document.querySelector(".hide");
			var show = document.querySelector(".show");
			var close = document.querySelector(".close");
			var layer = document.querySelector(".layer");
			var showLayer = document.querySelector(".showLayer");
			showLayer.addEventListener("click",function(){
				layer.style.display="block";
			})
			close.addEventListener("touchend",function(){
				layer.style.display="none";
			})
			baba.addEventListener("click",function(){
				baba.style.display="none";
			})
			hide.addEventListener("click",function(){
				baba.style.display="none";
			})
			show.addEventListener("click",function(){
				baba.style.display="block";
			})
		</script>
	</body>
</html>
